<!DOCTYPE html>
<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"/>
	<title>jTopo Demo</title>
	<meta name="description" content="jTopo免费的基于HTML5 Canvas的网络拓扑、关系图形库">
	<meta name="keyword" content="jTopo 网络 拓扑 图形库 HTML5 Canvas 免费 关系图形库 javascript topology">
	
	<link rel="stylesheet" type="text/css" href="../css/base.css">
	<link href="../css/jquery.snippet.min.css" rel="stylesheet">
	<style type="text/css">
	#contextmenu {
		border: 1px solid #aaa;
		border-bottom: 0;
		background: #eee;
		position: absolute;
		list-style: none;
		margin: 0;
		padding: 0;
		display: none;
	}
																			   
	#contextmenu li a {
		display: block;
		padding: 10px;
		border-bottom: 1px solid #aaa;
		cursor: pointer;
	}
																			   
	#contextmenu li a:hover {
		background: #fff;
	}
	</style>	
	
	<script src="../js/jquery.js"></script>
	<script src="../js/site.js"></script>
	<script src="../js/demo.js"></script>
	
	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
	
	<script type="text/javascript" src="js/jtopo-min.js"></script>
	<script type="text/javascript" src="js/toolbar.js"></script>
	
	<script id='code'>
		$(document).ready(function(){
			var canvas = document.getElementById('canvas');			
			var stage = new JTopo.Stage(canvas);
			//显示工具栏
			showJTopoToobar(stage);

			var scene = new JTopo.Scene();
			scene.background = './img/bg.jpg';
			stage.add(scene);
			
			var node = new JTopo.Node("右键菜单-A");	
			node.setLocation(200,200);
			scene.add(node);
			
			var node2 = new JTopo.Node("右键菜单-B");	
			node2.setLocation(400,200);
			scene.add(node2);

			var currentNode = null;
			function handler(event){
				if(event.button == 2){// 右键
					// 当前位置弹出菜单（div）
					$("#contextmenu").css({
						top: event.pageY,
						left: event.pageX
					}).show();	
				}
			}

			node.addEventListener('mouseup', function(event){
				currentNode = this;
				handler(event);
			});
			node2.addEventListener('mouseup', function(event){
				currentNode = this;
				handler(event);
			});
			
			stage.click(function(event){
				if(event.button == 0){// 右键
					// 关闭弹出菜单（div）
					$("#contextmenu").hide();
				}
			});
						
			/*
			<ul id="contextmenu" style="display:none;">	
			<li><a>顺时针旋转</a></li>
			<li><a>逆时针旋转</a></li>	
			<li><a>更改颜色</a></li>
			<li><a>放大</a></li>
			<li><a>缩小</a></li>	
			<li><a>删除该节点</a></li>
		    </ul>*/
			/* 右键菜单处理 */	
			$("#contextmenu a").click(function(){
				var text = $(this).text();
				
				if(text == '删除该节点'){
					scene.remove(currentNode);
					currentNode = null;
				}if(text == '撤销上一次操作'){
					currentNode.restore();
				}else{
					currentNode.save();
				}
				
				if(text == '更改颜色'){
					currentNode.fillColor = JTopo.util.randomColor();
				}else if(text == '顺时针旋转'){
					currentNode.rotate += 0.5;
				}else if(text == '逆时针旋转'){
					currentNode.rotate -= 0.5;
				}else if(text == '放大'){
					currentNode.scaleX += 0.2;
					currentNode.scaleY += 0.2;
				}else if(text == '缩小'){
					currentNode.scaleX -= 0.2;
					currentNode.scaleY -= 0.2;
				}
				$("#contextmenu").hide();
			});
		});
	</script>
  </head>

  <body>
  <ul id="contextmenu" style="display:none;">	
	<li><a>顺时针旋转</a></li>
	<li><a>逆时针旋转</a></li>	
	<li><a>更改颜色</a></li>
	<li><a>放大</a></li>
	<li><a>缩小</a></li>
	<li><a>撤销上一次操作</a></li>
	<li><a>删除该节点</a></li>
  </ul>
  

	<center>
	<div class="wrap_div">
		<div class="head_nav">
			<h2 class="logo"><a href="index.html" title="jTopo">jTopo</a></h2>
		</div>		
		<div class="head_nav_second">			
			<ul class="menu" id="nav_menu">
			
			</ul>
		</div>
		<div class="content">
		  <div class="left">
			<ul id="menu">
			
			</ul>
		  </div>
		  <div class="right">
				<div id="content">					<canvas width="850" height="550" id="canvas"></canvas>	
									
				</div>
		  </div>
		  <div class="clear"></div>
		</div>
	</div>
	</center>
	<div class="footer">
		&nbsp;
	</div>

  <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1000418207'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "v1.cnzz.com/z_stat.php%3Fid%3D1000418207%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script>
</body>

</html>